<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      }
      body {
        background-color: #fff;
        color: #0f4c81;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
      }
      .container {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        justify-content: flex-start;
      }

      /* Header and Navigation */
      .header {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
      }
      .back-button {
        position: absolute;
        left: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        color: #555;
      }
      .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        margin-left: 50px;
      }
      .progress-fill {
        height: 100%;
        width: 99%;
        background-color: #4991ef;
        border-radius: 4px;
      }

      /* Plan Card */
      .plan-card {
        width: 100%;
        border: 1px solid #dce6f9;
        border-radius: 24px;
        background-color: #fbfcff;
        padding: 40px 20px;
        margin-bottom: 30px;
        position: relative;
      }

      /* Graph */
      .growth-graph {
        width: 100%;
        height: 380px;
        margin: 0 0 40px;
        position: relative;
      }
      .grid-line {
        position: absolute;
        top: 20px;
        bottom: 80px;
        width: 1px;
        background-color: #e8e8e8;
        border-left: 1px dashed #e0e0e0;
      }
      .grid-line-1 {
        left: 25%;
      }
      .grid-line-2 {
        left: 50%;
      }
      .grid-line-3 {
        left: 75%;
      }

      /* Labels */
      .label-box {
        position: absolute;
        background-color: white;
        border-radius: 20px;
        padding: 12px 20px;
        font-size: 18px;
        font-weight: 500;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        z-index: 2;
      }
      .label-your-level {
        top: 170px;
        left: 60px;
      }
      .label-fluenty {
        top: 30px;
        right: 60px;
      }
      .label-other-apps {
        top: 170px;
        right: 60px;
      }

      .time-label {
        position: absolute;
        bottom: 30px;
        font-size: 22px;
        font-weight: 700;
      }
      .time-now {
        left: 60px;
        color: #4991ef;
      }
      .time-week4 {
        right: 60px;
        color: #ff9650;
      }

      .vertical-line {
        position: absolute;
        width: 2px;
        bottom: 30px;
      }
      .vertical-line-blue {
        left: 60px;
        height: 100px;
        border-left: 2px dashed #4991ef;
      }
      .vertical-line-orange {
        right: 60px;
        height: 100px;
        border-left: 2px dashed #ff9650;
      }

      /* SVG Styles */
      .graph-svg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .blue-path {
        fill: none;
        stroke: #4991ef;
        stroke-width: 10px;
        stroke-linecap: round;
      }
      .gray-path {
        fill: none;
        stroke: #aaaaaa;
        stroke-width: 10px;
        stroke-linecap: round;
      }
      .dot-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
      }
      .dot {
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
        transform: translate(-50%, -50%);
        z-index: 3;
      }
      .dot-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
      .dot-blue-start {
        left: 60px;
        bottom: 130px;
      }
      .dot-blue-start .dot-inner {
        background-color: #4991ef;
      }
      .dot-blue-end {
        right: 100px;
        top: 80px;
        transform: translate(50%, -50%);
      }
      .dot-blue-end .dot-inner {
        background-color: #4991ef;
      }
      .dot-gray {
        right: 60px;
        top: 200px;
        transform: translate(50%, -50%);
      }
      .dot-gray .dot-inner {
        background-color: #aaaaaa;
      }

      /* Content */
      .username {
        font-size: 32px;
        font-weight: 700;
        color: #4991ef;
        margin-right: 8px;
      }
      .title {
        font-size: 32px;
        font-weight: 700;
        color: #0f4c81;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1.3;
      }
      .subtitle {
        font-size: 20px;
        color: #333;
        margin-bottom: 40px;
        text-align: center;
        line-height: 1.5;
      }

      /* Continue Button */
      .continue-button {
        width: 100%;
        padding: 18px;
        background-color: #4991ef;
        color: white;
        border: none;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
        position: fixed;
        bottom: 20px;
        max-width: 560px;
      }
      .continue-button:hover {
        background-color: #3a7fd4;
      }

      @media (max-width: 480px) {
        .title {
          font-size: 28px;
        }
        .subtitle {
          font-size: 18px;
        }
        .time-label {
          font-size: 18px;
        }
        .label-box {
          font-size: 16px;
          padding: 10px 16px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Header with back button and progress bar -->
      <div class="header">
        <button class="back-button">
          <span class="material-icons">arrow_back</span>
        </button>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
      </div>

      <!-- Main content -->
      <div class="plan-card">
        <!-- Growth Graph -->
        <div class="growth-graph">
          <!-- Grid lines -->
          <div class="grid-line grid-line-1"></div>
          <div class="grid-line grid-line-2"></div>
          <div class="grid-line grid-line-3"></div>

          <!-- SVG Paths for curves -->
          <svg class="graph-svg" viewBox="0 0 800 400" preserveAspectRatio="none">
            <!-- Blue curve (fluenty ) -->
            <path class="blue-path" d="M 60,270 C 150,270 250,200 400,150 S 600,50 700,80" />

            <!-- Gray curve (Other Apps) -->
            <path class="gray-path" d="M 60,300 C 200,290 350,250 500,220 S 650,180 740,200" />
          </svg>

          <!-- Labels -->
          <div class="label-box label-your-level">Your Level</div>
          <div class="label-box label-fluenty">fluenty</div>
          <div class="label-box label-other-apps">Other Apps</div>

          <!-- Dots for points on curves -->
          <div class="dot-overlay">
            <div class="dot dot-blue-start">
              <div class="dot-inner"></div>
            </div>
            <div class="dot dot-blue-end">
              <div class="dot-inner"></div>
            </div>
            <div class="dot dot-gray">
              <div class="dot-inner"></div>
            </div>
          </div>

          <!-- Time indicators -->
          <div class="vertical-line vertical-line-blue"></div>
          <div class="time-label time-now">NOW</div>

          <div class="vertical-line vertical-line-orange"></div>
          <div class="time-label time-week4">WEEK 4</div>
        </div>

        <!-- Title with dynamic name -->
        <h1 class="title"><span class="username" id="user-name">bob</span>, your personalized plan is ready!</h1>

        <!-- Subtitle -->
        <p class="subtitle">We've crafted a self-growth plan based on your responses.</p>
      </div>

      <!-- Continue button -->
      <button class="continue-button">Continue</button>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const backButton = document.querySelector('.back-button')
        const continueButton = document.querySelector('.continue-button')
        const userNameElement = document.getElementById('user-name')

        // Get username from localStorage
        const userName = localStorage.getItem('userName') || 'User'
        userNameElement.textContent = userName.toLowerCase()

        // Back button handler
        backButton.addEventListener('click', function () {
          window.history.back()
        })

        // Continue button handler
        continueButton.addEventListener('click', function () {
          // Navigate to next page
          window.location.href = 'pay.html'
        })
      })
    </script>
  </body>
</html>
